// 顶部搜索栏 导航栏按钮 左导航栏 底部导航栏 footer
* {
    touch-action: pan-y;
}
/* 页面元素rem 计算公式：元素  / html字体大小(50) */
@basefont:50;
/* 顶部搜索框 search—content */
.search-content {
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: (105rem / @basefont);
    background-color: #fff;
    
    .logo {
        margin-left: (30rem / @basefont);
        display: inline-block;
        height: (60rem / @basefont);
        width: (60rem / @basefont);
        img {
            float: left;
            height: 100%;
            width: 100%;
        }
        /* -webkit-border-radius:((60rem / @basefont)/2);
        -moz-border-radius:((60rem / @basefont)/2); */
        border-radius: ((60rem / @basefont)/2);

        /* -webkit-box-shadow:0 (1rem / @basefont) (2rem / @basefont) rgba(0,0,0,.05);
        -moz-box-shadow:0 (1rem / @basefont) (2rem / @basefont) rgba(0,0,0,.05); */
        box-shadow:(1rem / @basefont) (0.5rem / @basefont) (2rem / @basefont) rgba(0,0,0,.4);
    }
    .title {
        position: absolute;
        left: 55%;
        transform: translateX(-50%);
        color: rgba(2, 150, 136, 1);
        font-size: 0.85333rem;
        .search_subtitle {
            font-size: (20rem / @basefont);
        }
    }
    .user {
        display: flex;
        align-items: center;
        justify-content: center;
        width: (50rem / @basefont);
        height: (50rem / @basefont);
        /* background-color: skyblue; */
        a {
            margin-right: (30rem / @basefont);
            /* background-color: pink; */
            font-family: 'icomoon';
            font-size: (50rem / @basefont);
            color: rgba(2, 150, 136, 1);
        }
    }
}
/* top栏部分 */
.nav_top {
    position: relative;
    border-bottom: (0.5rem / @basefont) solid #eee;
    height: (103rem / @basefont);
    width: (750rem / @basefont);
    background-color: #fff;
    .return_box {
        position: absolute;
        left: 0;
        .return {
            margin-left: (29rem / @basefont);
            height: 100%;
            font-family: 'icomoon';
            font-size: (37.5rem / @basefont);
            line-height: (105rem / @basefont);
            /* color: #333; */
        }
    }
    .nav_title {
        font-size: (37.5rem / @basefont);
        color: #333;
    }
}
/* 导航按钮 */
.nav_button {
    z-index: 10;
    position: fixed;
    bottom: 15%;
    left: 4%;
    background-color: #fff;
    height: (105rem / @basefont);
    width: (105rem / @basefont);
    border-radius: (105rem / @basefont / 2);
    box-shadow: 0 0 11px rgb(0 0 0 / 10%);
    .nav_button_in {
        a {
            position: relative;
            display: block;
            height: 100%;
            width: 100%;
            font-family: 'icomoon';
            font-size: (40rem / @basefont);
            font-weight: 400;
            text-align: center;
            line-height: (110rem / @basefont);
            color: rgb(2, 178, 181);
        }
    }
    
}
/* 左导航栏 */
.nav_intheleft {
    display: none;
    z-index: 10;
    position: fixed;
    left: -60%;
    top: 0;
    height: 100%;
    width: 60%;
    background-color: #fff;
    box-shadow: 0rem 0rem 0.43127rem rgb(0 0 0 / 18%);
    .nav_left {
        .nav_left_in {
            height: ((473*2rem) / @basefont);
            width: 100%;
            /* background-color: orangered; */
            ul {
                display: flex;
                flex-direction: column;
                height: 100%;
                width: 100%;
                /* background-color: pink; */
                font-size: (35rem / @basefont);
                a {
                    flex: 1;
                    padding-left: (50rem / @basefont);
                    transform: translateX(-100%);
                    box-sizing: border-box;
                    width: 100%;
                    line-height: ((473*2rem) / @basefont / 9);
                    color: rgba(123,131,134,1);
                    span {
                        float: left;
                        padding-right: (40rem / @basefont);
                        font-family: 'icomoon';
                        /* color: rgba(123,131,134,1); */
                    }
                    p {
                        font-size: (30rem / @basefont);
                        /* color: #000; */
                    }
                    .sy {
                        font-weight: 400;
                    }
                    .zx {
                        font-size: (35rem / @basefont);
                    }
                }
                .show {
                    transform: translateX(0);
                    transition: all 0.3s ease-out;
                }
                .close {
                    transform: translateX(-100%);
                    transition: all 0.3s ease-out;
                }
            }
        }
    }
}
/* 底部导航栏 bottom-nav */
.bottom-nav {
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: (105rem / @basefont);
    height: (80rem / @basefont);
    width: (620rem / @basefont);
    border-radius: (40rem / @basefont);
    background-color: rgba(244,244,244,0.9315476190476191);
    box-shadow: 0rem 0rem 0.69003rem rgb(0 0 0 / 19%);
    ul {
        height: 100%;
        width: 100%;
        a {
            float: left;
            display: inline-block;
            border-right: (2rem / @basefont) solid #fff;
            box-sizing: border-box;
            height: 100%;
            width: (620rem / @basefont / 4);
            color: rgba(6,193,174,1);
            li {
                display: inline-block;
                height: 100%;
                width: 100%;
                font-size: (35rem / @basefont);
                font-family: 'icomoon';
                text-align: center;
                line-height: (80rem / @basefont);
            }
        }
        .goBack {
            border-right:none;
        }
    }
}
/* footer */
.footer {
    padding: (36rem / @basefont) 0;
    box-sizing: border-box;
    width: (750rem / @basefont);
    height: (150rem / @basefont);
    font-size: (27.5rem / @basefont);
    color: #bfbfc3;
    .footer_box {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
       /*  background-color: skyblue; */
        div {
            flex: 1;
            font-size: (27.5rem / @basefont);
        }
        .version {
            span {
                margin: 0 (20rem / @basefont);
            }
            .gang {
                margin: 0;
            }
        }
    }

}
/* 弹窗 */
.popup {
    z-index: 10;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: (350rem / @basefont);
    box-sizing: border-box;
    border-radius: (10rem / @basefont);
    height: (96rem / @basefont);
    width: (405rem / @basefont);
    background-color: rgba(0, 0, 0, 0.8);
    span {
        font-size: (35rem / @basefont);
        color: #fff;
        &::before {
            margin-right: (10rem / @basefont);
            content: '';
            font-family: 'icomoon';
        }
    }
}
/* 确认弹窗部分 */
.sure_popup {
    display: none;
    z-index: 10;
    position: fixed;
    bottom: 0;
    padding-top: (50rem / @basefont);
    width: (750rem / @basefont);
    height: (270rem / @basefont);
    transform: translateY(100%);
    background-color: #fff;
    //border-radius: (50rem / @basefont);
    border-top-right-radius: (50rem / @basefont);
    border-top-left-radius: (50rem / @basefont);
    border-top: (1.25rem / @basefont) solid #eee;
    box-sizing: border-box;
    box-shadow: (1rem / @basefont) (0.5rem / @basefont) (2rem / @basefont) rgba(0,0,0,.4);
    .sure_box {
        position: relative;
        height: 100%;
        width: 100%;
        text-align: center;
        span {
            margin-top: (30rem / @basefont);
            margin-bottom: (60rem / @basefont);
            display: block;
            font-size: (35rem / @basefont);
            //background-color: skyblue;
        }
        .sure_popup_bottom {
            display: flex;
            width: 100%;
            input {
                flex: 1;
                border: 0;
                border-radius: 0;
                box-shadow: (1rem / @basefont) (0.5rem / @basefont) (2rem / @basefont) rgba(0,0,0,.4);
                height: (80rem / @basefont);
                background-color: #fff;
                font-size: (40rem / @basefont);
                color: #333;
            }
            .no {
                border-right: (1.25rem / @basefont) solid #eee;
            }
        }
    }
    
}